<!--
    卡片风格的文件上传组件，主要用于一些小文件的上传，暂不支持分组上传

    用法：<f7-file-upload :params="uploadParams" accept="image/png,image/jpeg" extensions="png,jpg,jpeg" title="资质证书" uploadId="files1"></f7-file-upload>

    备注：params，url后的请求参数，JSON格式，比如上面的
                uploadParams = { dataKey: 'xx', type: 'company' }
        accept，接受什么样的文件
        extensions，接受什么样的文件后缀
        title，显示的标题
        uploadId，默认值files1，如果一个页面上有多个该组件实例，需要指定为不同的uploadId，
                目前支持的uploadId有10个，files1 ~ files10，参考下面的filesJson，可自行增加
 -->
<template>
    <file-upload
      :input-id="uploadId"
      :uploadAuto="uploadAuto"
      @input-file="inputFile"
      @input-filter="inputFilter"
      :multiple="multiple"
      :data="params"
      :extensions="extensions"
      :accept="accept"
      :size="size"
      :post-action="postUrl"
      v-model="uploadFiles"
      :ref="uploadId"
    >
      <slot></slot>
    </file-upload>

</template>
<script>
import ImageCompressor from "image-compressor.js";
import FileUpload from "vue-upload-component";
import formatter from "../framework/formatter";
import Config from "../config";
import Upload from "../framework/upload";

export default {
  components: {
    FileUpload
  },
  props: {
    params: {
      type: Object,
      default: {}
    },
    extensions: {
      type: String
    },
    accept: {
      type: String
    },
    multiple: {
      type: Boolean,
      default: true
    },
    size: {
      type: Number,
      default: 1024 * 1024 * 10
    },
    postAction: {
      type: String,
      default: Config.api.upload
    },
    chunkAction: {
      type: String,
      default: "/api/base/ChunkUpload/upload"
    },
    customAction: {
      type: Function
    },
    uploadAuto: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: ""
    },
    inputId: {
      // 保留，统一使用下面的uploadId
      type: String
    },
    uploadRef: {
      // 保留，统一使用下面的uploadId
      type: String
    },
    vforId: {
      // 保留，统一使用下面的uploadId
      type: String
    },
    uploadId: {
      type: String,
      default: "files"
    }
  },
  data() {
    return {
      downUrl: "/api/base/fileupload/downFile",
      getUrl: "/api/base/fileupload/getFiles",
      deleteUrl: "/api/base/fileupload/delFile",
      postUrl: "/api/base/fileupload/uploadFile",
      uploadFiles: []
    };
  },
  methods: {
    formatError(file) {
      var error = "上传失败";
      switch (file.error) {
        case "size":
          error = "文件太大，不超过" + formatter.formatFileSize(this.size);
          break;
        case "extension":
          error = "文件类型不符，只允许" + this.accept;
          break;
        case "timeout":
          error = "网络超时";
          break;
        case "abort":
          error = "用户放弃";
          break;
        case "network":
          error = "网络连接失败";
          break;
        case "server":
          error = "服务器错误";
          break;
        case "denied":
          error = "请求无效";
          break;
        default:
          error = "上传失败";
          break;
      }
      return error;
    },
    inputFilter(newFile, oldFile, prevent) {
      if (newFile && !oldFile) {
        // Before adding a file
        // 添加文件前
        // Filter system files or hide files
        // 过滤系统文件 和隐藏文件
        if (/(\/|^)(Thumbs\.db|desktop\.ini|\..+)$/.test(newFile.name)) {
          return prevent();
        }
        // Filter php html js file
        // 过滤 php html js 文件
        if (/\.(php5?|html?|jsx?)$/i.test(newFile.name)) {
          return prevent();
        }
      }
      if (newFile && (!oldFile || newFile.file !== oldFile.file)) {
        // Create a blob field
        // 创建 blob 字段
        newFile.blob = "";
        let URL = window.URL || window.webkitURL;
        if (URL && URL.createObjectURL) {
          newFile.blob = URL.createObjectURL(newFile.file);
        }
        // Thumbnails
        // 缩略图
        newFile.thumb = "";
        if (newFile.blob && newFile.type.substr(0, 6) === "image/") {
          newFile.thumb = newFile.blob;
        }
      }
    },
    // add, update, remove File Event
    inputFile(newFile, oldFile) {
      if (newFile && oldFile) {
        // update
        if (newFile.active && !oldFile.active) {
          // beforeSend
        }
        if (newFile.progress !== oldFile.progress) {
          // progress
        }
        if (newFile.error && !oldFile.error) {
          // error
        }
        if (newFile.success && !oldFile.success) {
          console.log("success");
          // success
          this.$emit("uploaded", newFile);
        }
      }
      if (!newFile && oldFile) {
        // remove
        if (oldFile.success && oldFile.response.id) {
          // $.ajax({
          //   type: 'DELETE',
          //   url: '/upload/delete?id=' + oldFile.response.id,
          // })
        }
      }
      // Automatically activate upload
      if (
        Boolean(newFile) !== Boolean(oldFile) ||
        oldFile.error !== newFile.error
      ) {
        if (this.uploadAuto && !this.$refs[this.uploadId].active) {
          this.$refs[this.uploadId].active = true;
        }
      }
    }
  },
  mounted() {
    if (window.plus) {
      this.postUrl = Config.api.upload;
    }
  }
};
</script>
<style scoped>
.chunk-loading {
  margin: -12px;
  display: flex;
  width: calc(100% + 24px);
}
.chunk-loading .chunk-loading-part {
  height: 25px;
  line-height: 25px;
  flex: 1;
  background: #ccc;
  font-size: 14px;
  color: white;
  text-align: center;
}
.chunk-loading .chunk-loading-part.chunk-loading-part__uploaded {
  background: #28a745;
}
.file-uploads {
  width: 100%;
}
</style>
